{% extends "templ.html" %}

{% block body%}
<style>
textarea.comment{
   margin-bottom: 8px
}
</style>
<div class="well well-sm">
   <div class='item media'>
      <div class="media-body">
         <h4 class='timestamp' id='{{ chirping.timestamp }}'>
            <small><i class='timestamp'></i></small>
         </h4>
         <p class='text'>{{ chirping.text }}</p>

      </div>
   </div>
</div>

<div class='chirping_comments'>
   {# {% include 'chirping-comments.html' %} #}
   {% include 'chirping-comments.html' %}
</div>

<div class="comment panel panel-default">
   <div class="panel-body">
      <form id='chirping_comment_form' role="form" action="" method="post">
         <div class="form-group">
            <label for="name">Comment:</label>
            <input id='timestamp' name='timestamp' type='text' value='' hidden>
            <input name='chirping_timestamp' type='text' value='{{ chirping.timestamp }}' hidden>
            <textarea name="text" class="comment form-control" rows="3"></textarea>
            <button id='submit' type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-ok">&nbsp;Submit</span>
            </button>
         </div>
      </form>
   </div>
</div>
<script>

function submit_comment(){
   $('input#timestamp').val(new Date().getTime())
   chirping_timestamp = $('h4.timestamp').attr('id')
   //comments_offset = $('input#comments_offset').val()
   $.ajax({
      type: "POST",
      url: "/chirping/comment",
      data: $('#chirping_comment_form').serialize(),
      success: function (result) {
         //window.location = '/chirping/view/html?timestamp=' + chirping_timestamp
         fetch_comments(0)
      },
      error : function() {
      }
   });
}

window.onload = function(){
   $('button#submit').on('click', function(){
      submit_comment();
   });
   render_timestamp();
   fetch_comments(0)

}

</script>
{% endblock %}
